<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewpo rt" content="width=device-width, initial-scale=1.0">
		<title>网易云音乐</title>
		<script src="js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" href="css/reset.css" type="text/css">
		<link rel="stylesheet" href="css/index.css" type="text/css">
		<link rel="stylesheet" href="css/utrls.css" type="text/css">
	</head>
	<!-- 首页 -->
	<body>
		<!-- 黑色导航条 -->
		<div class="m_top">
			<div class="wrap">
				<a href="index.html"><h1 class="logo"></h1></a>
				<!-- 导航条 -->
				<ul class="m_navWrap">
					<li class="z_slt">发现音乐</li>
					<li>我的音乐</li>
					<li>关注</li>
					<li><a href="market.html" style="color: #ccc;text-decoration: none;" target="_blank">商场</a></li>
					<li>音乐人</li>
					<li>云推歌</li>
					<li class="pr">下载客户端
						<i class="hot"></i>
					</li>
				</ul>
				<!-- 登录 -->
				<a class="login_btn" href="login.html">
					登录
				</a>
				<!-- 创作者中心 -->
				<a href="#" class="creator">创作者中心</a>
				<!-- 搜索框 -->
				<div class="music_serarch">
					<input class="serach_input" type="text" />
					<label class="click">音乐/视频/电台/用户</label>
				</div>
			</div>
		</div>

		<!-- 红色导航条 -->
		<div class="r_top">
			<div class="r_navWrap">
				<ul>
					<li>
						<a class="a_bg" href="#">推荐</a>
					</li>
					<li>
						<a href="ranking_list.html">排行榜</a>
					</li>
					<li>
						<a>歌单</a>
					</li>
					<li>
						<a>主播电台</a>
					</li>
					<li>
						<a>歌手</a>
					</li>
					<li>
						<a>新碟上架</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 轮播图 -->
		<div class="slider_wrap" id="slider_wrap"
			style="background-image: url('img/1_1.jpg'); background-size: 6000px; background-position: center center;">
			<div class="wrap">
				<img src="img/1.jpg" class="active">
				<img src="img/2.jpg">
				<img src="img/3.jpg">
				<img src="img/4.jpg">
				<img src="img/5.jpg">
				<img src="img/6.jpg">
				<img src="img/7.jpg">
				<img src="img/8.jpg">
				<div class="download">
					<a href="https://music.163.com/#/download" class="down_btn"></a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
				<div class="dots">
					<a href="javascript:" class="red_dot"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
					<a href="javascript:"></a>
				</div>
				<a href="javascript:" class="left_btn"></a>
				<a href="javascript:" class="right_btn"></a>
			</div>
		</div>

		<!-- 页面主体 -->
		<div class="main_bg">
			<div class="main">
				<!-- 左边主体 -->
				<div class="left_main">
					<!-- 热门推荐 -->
					<div class="recommend">
						<a href="tuijian.html" class="title">
							热门推荐
						</a>
						<div class="tab">
							<a href="">华语</a>
							<span>|</span>
							<a href="">流行</a>
							<span>|</span>
							<a href="">摇滚</a>
							<span>|</span>
							<a href="">民谣</a>
							<span>|</span>
							<a href="">电子</a>
						</div>
						<span class="more">
							<a href=""> 更多</a>
							<i class="arrow">&nbsp;</i>
						</span>
					</div>

					<!-- 歌单 -->
					<ul class="recommend_playlist">
						<li>
							<div class="cover">
								<a href="" title="华语速爆新歌 | 薛之谦：半醒半醉 向星斗举杯">
									<img src="img/tj1.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="华语速爆新歌 | 薛之谦：半醒半醉 向星斗举杯">
									华语速爆新歌 | 薛之谦：半醒半醉 向星斗举杯</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="开启心动模式，耳机里的糖分你一半">
									<img src="img/tj2.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">302万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="开启心动模式，耳机里的糖分你一半">
									开启心动模式，耳机里的糖分你一半</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="二十岁后的人生像是按了加快键">
									<img src="img/tj3.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="二十岁后的人生像是按了加快键">
									二十岁后的人生像是按了加快键</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="还记得你的梦想吗？别让你的梦只有想">
									<img src="img/tj4.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="还记得你的梦想吗？别让你的梦只有想">
									还记得你的梦想吗？别让你的梦只有想</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="别急，甜甜的恋爱马上就轮到你了">
									<img src="img/tj5.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">7688万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="别急，甜甜的恋爱马上就轮到你了">
									别急，甜甜的恋爱马上就轮到你了</a>
							</p>
						</li>

						<li>
							<div class="cover">
								<a href="" title="别整太大鸭力，要多鸡立自己">
									<img src="img/tj6.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="别整太大鸭力，要多鸡立自己">
									别整太大鸭力，要多鸡立自己</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="SE02：时代下沉，没有踩中红利的青年人如何逆流而上">
									<img src="img/tj7.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="SE02：时代下沉，没有踩中红利的青年人如何逆流而上">
									<i class="icn"></i>
									SE02：时代下沉，没有踩中红利的青年人如何逆流而上</a>
							</p>
						</li>
						<li>
							<div class="cover">
								<a href="" title="VoL.18 独家『效率提升』秘籍: 解决时间杀手，告别“无...">
									<img src="img/tj8.jpg" alt="">
								</a>
								<div class="cover_btn">
									<a href="" class="play"></a>
									<span class="headset"></span>
									<span class="num">3052万</span>
								</div>
							</div>
							<p class="title">
								<a href="javascript:;" title="VoL.18 独家『效率提升』秘籍: 解决时间杀手，告别“无...">
									<i class="icn"></i>
									VoL.18 独家『效率提升』秘籍: 解决时间杀手，告别“无...</a>
							</p>
						</li>
					</ul>

					<!-- 新碟上架 -->
					<div class="recommend">
						<a href="javascript:;" class="title">
							新碟上架
						</a>
						<span class="more">
							<a href=""> 更多</a>
							<i class="arrow">&nbsp;</i>
						</span>
					</div>

					<!-- 歌单轮播图 -->
					<div class="new_list">
						<div class="inner">
							<a href="#" class="left_btn"></a>
							<div class="turn">
								<ul class="turn_list active">
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd2.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">如果，你还在/M..</a></p>
										<p class="song"><a href="" class="song_author">BrAnTB白景屹</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd3.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">Brat and itcom..</a></p>
										<p class="song"><a href="" class="song_author">Charli xcx</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd1.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">THE ONE YOU</a></p>
										<p class="song"><a href="" class="song_author">朴宰范</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd4.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">Moon Music</a></p>
										<p class="song"><a href="" class="song_author">Coldpaly</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd5.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">黑马</a></p>
										<p class="song"><a href="" class="song_author">李荣浩</a></p>
									</li>
								</ul>
								<ul class="turn_list">
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd2.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">如果，你还在/M..</a></p>
										<p class="song"><a href="" class="song_author">BrAnTB白景屹</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd3.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">Brat and itcom..</a></p>
										<p class="song"><a href="" class="song_author">Charli xcx</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd1.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">THE ONE YOU</a></p>
										<p class="song"><a href="" class="song_author">朴宰范</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd5.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">黑马</a></p>
										<p class="song"><a href="" class="song_author">李荣浩</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd5.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">黑马</a></p>
										<p class="song"><a href="" class="song_author">李荣浩</a></p>
									</li>
								</ul>
								<ul class="turn_list">
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd2.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">如果，你还在/M..</a></p>
										<p class="song"><a href="" class="song_author">BrAnTB白景屹</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd3.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">Brat and itcom..</a></p>
										<p class="song"><a href="" class="song_author">Charli xcx</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd1.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">THE ONE YOU</a></p>
										<p class="song"><a href="" class="song_author">朴宰范</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd5.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">黑马</a></p>
										<p class="song"><a href="" class="song_author">李荣浩</a></p>
									</li>
									<li>
										<div class="disc">
											<a href="" title="" class="msk"></a>
											<a href="" class="play_btn"></a>
											<img src="img/xd5.jpg" alt="" />
										</div>
										<p class="song"><a href="" class="song_name">黑马</a></p>
										<p class="song"><a href="" class="song_author">李荣浩</a></p>
									</li>
								</ul>
							</div>
							<a href="#" class="right_btn"></a>
						</div>
					</div>

					<!-- 榜单 -->
					<div class="recommend">
						<a href="javascript:;" class="title">
							榜单
						</a>
						<span class="more">
							<a href=""> 更多</a>
							<i class="arrow">&nbsp;</i>
						</span>
					</div>

					<!-- 榜单列表 -->
					<div class="ranking_list">
						<!-- 飙升表 -->
						<dl class="blk">
							<dt class="top">
								<div class="cver">
									<img src="img/bd1.jpg" alt="">
									<a href="" class="msk" title="飙升榜"></a>
								</div>
								<div class="tit">
									<a href="" title="飙升表">
										<h3>
											飙升表
										</h3>
									</a>
									<div class="btn">
										<a href="" class="go_bg" title="播放"></a>
										<a href="" class="save_bg" title="收藏"></a>
									</div>
								</div>
							</dt>
							<dd>
								<ol>
									<li>
										<span class="list_top god">1</span>
										<a href="" class="title">Happy Fce</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">2</span>
										<a href="" class="title">Gbgn(凌晨两三点)</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">3</span>
										<a href="" class="title">来呀去呀</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">4</span>
										<a href="" class="title">Lifestyle</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">5</span>
										<a href="" class="title">我知道</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">6</span>
										<a href="" class="title">前进Marching</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">7</span>
										<a href="" class="title">孤独患者</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">8</span>
										<a href="" class="title">七月七日晴</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">9</span>
										<a href="" class="title">we belong Toger</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">10</span>
										<a href="" class="title">七日七月</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="">查看全部></a>
								</div>
							</dd>
						</dl>
						<!-- 新歌榜 -->
						<dl class="blk">
							<dt class="top">
								<div class="cver">
									<img src="img/bd2.jpg" alt="">
									<a href="" class="msk" title="新歌榜"></a>
								</div>
								<div class="tit">
									<a href="" title="新歌榜">
										<h3>
											新歌榜
										</h3>
									</a>
									<div class="btn">
										<a href="" class="go_bg" title="播放"></a>
										<a href="" class="save_bg" title="收藏"></a>
									</div>
								</div>
							</dt>
							<dd>
								<ol>
									<li>
										<span class="list_top god">1</span>
										<a href="" class="title">APT.</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">2</span>
										<a href="" class="title">他不懂</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">3</span>
										<a href="" class="title">米明好友</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">4</span>
										<a href="" class="title">回流</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">5</span>
										<a href="" class="title">想你</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">6</span>
										<a href="" class="title">先说谎的人</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">7</span>
										<a href="" class="title">VTTT</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">8</span>
										<a href="" class="title">在那天回不去的路上</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">9</span>
										<a href="" class="title">我是真的爱上你</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">10</span>
										<a href="" class="title">来呀去呀</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="">查看全部></a>
								</div>
							</dd>
						</dl>
						<!-- 原创榜 -->
						<dl class="blk">
							<dt class="top">
								<div class="cver">
									<img src="img/bd3.jpg" alt="">
									<a href="" class="msk" title="原创榜"></a>
								</div>
								<div class="tit">
									<a href="" title="原创榜">
										<h3>
											原创榜
										</h3>
									</a>
									<div class="btn">
										<a href="" class="go_bg" title="播放"></a>
										<a href="" class="save_bg" title="收藏"></a>
									</div>
								</div>
							</dt>
							<dd>
								<ol>
									<li>
										<span class="list_top god">1</span>
										<a href="" class="title">来呀去呀</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">2</span>
										<a href="" class="title">一场山火</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top god">3</span>
										<a href="" class="title">VTTT.</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">4</span>
										<a href="" class="title">安全第一</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">5</span>
										<a href="" class="title">湖边迪斯扣</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">6</span>
										<a href="" class="title">舞舞舞</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">7</span>
										<a href="" class="title">前进MARCHING</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">8</span>
										<a href="" class="title">奇点</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">9</span>
										<a href="" class="title">雨天的难题</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
									<li>
										<span class="list_top">10</span>
										<a href="" class="title">云天明</a>
										<!-- 弹出菜单 -->
										<div class="list_hover">
											<a href="" class="list_go" title="播放"></a>
											<a href="" class="list_add" title="添加到播放列表"></a>
											<a href="" class="list_save" title="收藏"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="">查看全部></a>
								</div>
							</dd>
						</dl>
					</div>
				</div>

				<!-- 右边主体 -->
				<div class="right_main">
					<!-- vip -->
					<div class="vip">
						<img src="img/vip.png" alt="">
					</div>
					<!-- 用户登录 -->
					<div class="login">
						<div class="login_bg">
							<p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
							<a href="">用户登录</a>
						</div>
					</div>
					<!-- 入驻歌手 -->
					<div class="singer">
						<h3>
							<span>入驻歌手</span>
							<a href="">查看全部 ></a>
						</h3>
						<ul>
							<li>
								<a href="">
									<div class="photo">
										<img src="img/rzgs1.jpg" alt="" style="width: 62px;" />
									</div>
									<div class="tit">
										<h4>
											<span>
												薛之谦
											</span>
										</h4>
										<p>
											Joker Xue;Jacky Xue
										</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="photo">
										<img src="img/rzgs2.jpg" alt="" style="width: 62px;" />
									</div>
									<div class="tit">
										<h4>
											<span>
												张杰
											</span>
										</h4>
										<p>
											Jason Zhang
										</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="photo">
										<img src="img/rzgs3.jpg" alt="" style="width: 62px;" />
									</div>
									<div class="tit">
										<h4>
											<span>
												陈奕迅
											</span>
										</h4>
										<p>
											Eason Chan
										</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="photo">
										<img src="img/rgzs3.jpg" alt="" style="width: 62px;" />
									</div>
									<div class="tit">
										<h4>
											<span>
												张惠妹
											</span>
										</h4>
										<p>
											中国台湾歌手
										</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="photo">
										<img src="img/rgzs4.jpg" alt="" style="width: 62px;" />
									</div>
									<div class="tit">
										<h4>
											<span>
												吴莫愁
											</span>
										</h4>
										<p>
											<中国好声音选手>
										</p>
									</div>
								</a>
							</li>
						</ul>
						<div>
							<a href="" class="apply">
								<i>申请成为网易音乐人</i>
							</a>
						</div>
					</div>
					<!-- 热门主播 -->
					<div class="anchor">
						<h3>热门主播</h3>
						<ul>
							<li>
								<a href="" class="photo">
									<img src="img/zb1.jpg" alt="">
								</a>
								<div class="info">
									<p>
										<a href="" class="singer">陈立</a>
									</p>
									<p class="brief">
										心理学家、美食家陈立教授
									</p>
								</div>
							</li>
							<li>
								<a href="" class="photo">
									<img src="img/zb2.jpg" alt="">
								</a>
								<div class="info">
									<p>
										<a href="" class="singer">刘维Julius</a>
									</p>
									<p class="brief">
										歌手、博客节目,娓娓道来
									</p>
								</div>
							</li>
							<li>
								<a href="" class="photo">
									<img src="img/zb3.jpg" alt="">
								</a>
								<div class="info">
									<p>
										<a href="" class="singer">莫非定律乐团</a>
									</p>
									<p class="brief">
										男女双人全创
									</p>
								</div>
							</li>
							<li>
								<a href="" class="photo">
									<img src="img/zb4.jpg" alt="">
								</a>
								<div class="info">
									<p>
										<a href="" class="singer">嘴碎许美达</a>
									</p>
									<p class="brief">
										脱口秀网络达人
									</p>
								</div>
							</li>
							<li>
								<a href="" class="photo">
									<img src="img/zb5.jpg" alt="">
								</a>
								<div class="info">
									<p>
										<a href="" class="singer">临川Rachel</a>
									</p>
									<p class="brief">

									</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>

		<!-- 回到顶部 top -->
		<a class="return_top" href="#"></a>

		<!-- 底部 -->
		<div class="footer">
			<div class="f_main">
				<div class="f_wrap">
					<ul class="enther">
						<li class="unit">
							<a href="" class="f_logo a1"></a>
							<span class="title">音乐开放平台</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a2"></a>
							<span class="title">云村交易所</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a3"></a>
							<span class="title">X studioAIg歌手</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a4"></a>
							<span class="title">用户认证</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a5"></a>
							<span class="title">AI免费写歌</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a6"></a>
							<span class="title">云推歌</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a7"></a>
							<span class="title">赞赏</span>
						</li>
					</ul>
					<div class="copy">
						<p class="link">
							<a href="" class="item">服务条款</a>
							<span class="line">|</span>
							<a href="" class="item">隐私政策</a>
							<span class="line">|</span>
							<a href="" class="item">儿童隐私政策</a>
							<span class="line">|</span>
							<a href="" class="item">版权投诉</a>
							<span class="line">|</span>
							<a href="" class="item">投资者关系</a>
							<span class="line">|</span>
							<a href="" class="item">广告合作</a>
							<span class="line">|</span>
							<a href="" class="item">联系我们</a>
						</p>
						<p>
							<a href="">廉正举报</a>
							<span>不良信息举报邮箱: 51jubao@service.netease.com</span>
							<span>客服热线：95163298</span>
						</p>
						<p>
							<span>互联网宗教信息服务许可证：浙（2022）0000120</span>
							<span>增值电信业务经营许可证：浙B2-20150198</span>
							<a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
						</p>
						<p>
							<span>网易公司版权所有©1997-2024</span>
							<span>杭州乐读科技有限公司运营：</span>
							<a href="">浙网文[2024] 0900-042号</a>
							<span class="s_logo"></span>
							<a href="">浙公网安备 33010802013307号</a>
							<a href="">算法服务公示信息</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部播放器 -->
		<div class="play_bar">
			<div class="wrap">
				<div class="btn">
					<a href="" title="上一首" class="up"></a>
					<a href="" title="播放/暂停" class="go"></a>
					<a href="" title="下一首" class="dow"></a>
				</div>
				<div class="head">
					<img src="img/tj1.jpg" alt="" />
					<a href="" class="mask"></a>
				</div>
				<div class="play_wrap">
					<div class="play_info">
						<a href="" class="song_name">小尖尖</a>
						<a href="" class="song_author">薛之谦</a>
						<a href="" class="song_src"></a>
					</div>
					<!-- 进度条 -->
					<div class="play_bg">
						<div class="bar_bg"></div>
						<div class="cur" style="width: 30%;">
							<a href="" class="gd_btn">

							</a>
						</div>
						<div class="play_time">
							<em>01:33</em>/03:11
						</div>
					</div>
				</div>
				<div class="oper">
					<a href="" title="画中画歌词" class="lyric"></a>
					<a href="" title="收藏" class="like"></a>
					<a href="" title="分享" class="share"></a>
				</div>
				<div class="ctrl">
					<!-- 音量 -->
					<a href="" class="icon"></a>
					<a href="" class="loop"></a>
					<a href="" class="list">0</a>
					<a href="" class="turn"></a>
				</div>
			</div>
			<div class="updn">
				<div class="up_left">
					<a href="" class="up_btn"></a>
				</div>
				<div class="up_right"></div>
			</div>
		</div>
	</body>

	<script src="js/index.js"></script>
</html>